entry {
    ui::interact-with-window {
        title: { const 'Todo List' },
        content: Root,
        assets: [StyleSheet],
        on-close: { Some { sys::exit 0 } }
    }
};
asset StyleSheet: AssetCSS 'assets/style.css';

type Todo {
    content:  String,
    finished: Bool
}
default {
    content: '',
    finished: No
};
const EmptyTodo: Todo
    { |Todo| {} };

const Root: ui::Component
    let center := { ui::Box ['center'] },
    let row := { ui::Box ['row'] },
    \ use let list := { ui::ListState::[Todo] [] },
    \ use { ui::Effect (list.state -> |.{debug-log &() => Noop}|) },
    { center [
        { row [
            { ui::Button ('Append', (Noop with
                \ await
                let content? := { ui::modal-get-line {
                    title: 'Add Todo',
                    prompt: 'Content:',
                    initial: ''
                } },
                switch content?:
                case Some content:
                    { list.append { content } },
                case None:
                    Noop,
                end
            )) }
        ] },
        { ui::ListView (list, &(key, info, todo) => { row [
            { { ui::Box ['v-center'] } [
                { ui::Checkbox (todo proj |.(finished)|) }
            ] },
            { { ui::Style ['line-edit'] }
                { ui::TextView (todo proj |.(content)|) }
            },
            { ui::Button ('↑', { list.swap-up key }) }
                . { with { ui::DisableCond (info map |.is-first|) } },
            { ui::Button ('↓', { list.swap-down key }) }
                . { with { ui::DisableCond (info map |.is-last|) } },
            { ui::Button ('+', { list.insert-after (key, EmptyTodo) }) },
            { ui::Button ('×', { list.delete key }) }
        ] }) }
    ] };
